import React from 'react'
import { Button, Table,Modal,Input} from 'antd'
const { Column } = Table;
let tableData = [
    {
        key: '1',
        bjinputv: '楼盘主编',
        glyNum:'32'
    },
    {
        key: '2',
        bjinputv: '青羊区编辑组',
        glyNum:'32'
    },
    {
        key: '3',
        bjinputv: '武侯区编辑组',
        glyNum:'32'
    },
    
];
class Juese extends React.Component {
    constructor(){
        super()
        this.state = {
            tableData:tableData,
            visible:false,
            bjinputv:'',
            glyNum:''
        }
    }
    //modal
    modalCancel=()=>{
        this.setState({
            visible:false
        })
        // this.componentDidMount()
    }
    bianjibtn=()=>{
        this.setState({
            visible:false
        })
        let arr = []
        tableData.forEach((item)=>{
            arr.push(item.key)
        })
        let num = parseInt( arr.sort((a,b)=>{
            return b-a
        }))
        // console.log(num);
        let obj = {
            key:num+1,
            bjinputv:this.state.bjinputv,
            glyNum:this.state.glyNum
        }
        // console.log(obj);
        let alldata = [...this.state.tableData]
        this.setState({
            tableData:[...alldata,obj]
        })
    }
    addjuese=()=>{
        this.setState({
            visible:true
        })
    }
    setinputvalue=(e)=>{
        this.setState({
            bjinputv:e.target.value
        })
    }
    setglyNumvalue=(e)=>{
        this.setState({
            glyNum:e.target.value
        })
    }
    deleteRow=(obj)=>{
        console.log(obj);
        let mydata = []
        this.state.tableData.forEach((item)=>{
            mydata.push(item.key)
        })
        let num = mydata.indexOf(obj.key)
        this.state.tableData.splice(num,1)
        let testdata = [...this.state.tableData]
        this.setState({
            tableData:testdata
        })
    }
    deleteTags=(obj)=>{
        let mydata = []
        this.state.tableData.forEach((item)=>{
            mydata.push(item.key)
        })
        let num = mydata.indexOf(obj.key)
        this.state.tableData.splice(num,1,obj)
        let testdata = [...this.state.tableData]
        this.setState({
            tableData:testdata
        })
    }
    render() {
        return (
           <div >
               <div style={{  padding: '0 0 10px' }}>
                    <Button onClick={this.addjuese} type='primary'>添加角色  </Button>
                </div>
                <Table dataSource={this.state.tableData}>
                    <Column width='42%' title="角色名称" dataIndex="bjinputv" key="bjinputv" />
                    <Column width='38%' title="管理员数" dataIndex="glyNum" key="glyNum" />
                    <Column title="操作"key="action"
                        render={(text, record) => (
                            <span>
                                 <Mybtn deleteData={this.deleteRow} bjrowdata={this.deleteTags} rowdata={record}/>
                            </span>
                        )}
                    />
                </Table>
                <Modal
                    title="新增"
                    visible={this.state.visible}
                    onCancel={this.modalCancel}
                    footer={[
                        <Button key='modalqueding' type='primary'  onClick={this.bianjibtn}>
                            确定
                        </Button>,
                        <Button key='modalquxiao' onClick={this.modalCancel}>
                            取消
                        </Button>
                    ]}
                >   角色名称:
                    <Input value = {this.state.bjinputv} onChange={this.setinputvalue}/>
                    管理员数:
                    <Input value = {this.state.glyNum} onChange={this.setglyNumvalue}/>
                </Modal>
           </div>
        )
    }
}
class Mybtn extends React.Component {
    constructor(){
        super()
        this.state = {
            visible:false,
            roudata:[],
            bjinputv:'',
            //删除MODAL
            Dievisible:false,
            glyNum:''
        }
    }
    componentDidMount(){
        this.setState({
            bjinputv:this.props.rowdata.bjinputv,
            glyNum:this.props.rowdata.glyNum,
        })
    }
    modalCancel=()=>{
        this.setState({
            visible:false
        })
        this.componentDidMount()
    }
    bianjibtn=()=>{
        this.setState({
            visible:false
        })
        let testobj = this.props.rowdata
        testobj.bjinputv = this.state.bjinputv
        testobj.glyNum = this.state.glyNum
        this.props.bjrowdata(testobj)
    }
    setinputvalue=(e)=>{
        this.setState({
            bjinputv:e.target.value
        })
    }
    setglyNumvalue=(e)=>{
        this.setState({
            glyNum:e.target.value
        })
    }
    deleteCol=()=>{
        this.setState({
            Dievisible: true,
        });
    }
    //删除modalOK
    diemodalok=()=>{
        this.setState({
            Dievisible: false,
        });
        this.props.deleteData(this.props.rowdata)
    }
    //删除modalclear
    diemodalclear=()=>{
        this.setState({
            Dievisible: false,
        });
    }
    Hxwzbj=()=>{
        // console.log('bianji');
        this.setState({
            visible:true
        })
        this.componentDidMount()
    }
    render(){
        return(
            <div>
                <Button onClick={this.Hxwzbj}>编辑</Button>
                <Button onClick={this.deleteCol}>删除</Button>
                {/* 编辑 */}
                <Modal
                    title="编辑"
                    visible={this.state.visible}
                    onCancel={this.modalCancel}
                    footer={[
                        <Button key='modalqueding' type='primary'  onClick={this.bianjibtn}>
                            确定
                        </Button>,
                        <Button key='modalquxiao' onClick={this.modalCancel}>
                            取消
                        </Button>
                    ]}
                >
                    角色名称:
                    <Input value = {this.state.bjinputv} onChange={this.setinputvalue}/>
                    管理员数:
                    <Input value = {this.state.glyNum} onChange={this.setglyNumvalue}/>
                </Modal>
                {/* 提示 */}
                <Modal
                    title="提示"
                    visible={this.state.Dievisible}
                    footer={[
                        <Button key='diemodalqueding' type='primary'  onClick={this.diemodalok}>
                            确定
                        </Button>,
                        <Button key='diemodalquxiao' onClick={this.diemodalclear}>
                            取消
                        </Button>
                    ]}
                    >
                    <p>你确定要删除吗？</p>
                </Modal>
            </div>
        )
    }
}
export default Juese